<template>
  <div class="edit-recipe">
    <el-container>
      <el-header
        ><h1>{{ index ? '编辑菜谱' : '新建菜谱' }}</h1></el-header
      >
      <el-container>
        <el-aside width="30%">
          <div>
            <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="key" width="80" label="字段"></el-table-column>
              <el-table-column prop="value" label="描述"> </el-table-column>
            </el-table>
          </div>
        </el-aside>
        <el-main>
          <div class="edit-recipe-wrap">
            <el-form ref="form" :model="form" label-width="120px">
              <el-form-item required :label="value" v-for="(value, key) in recipeLable" :key="key">
                <template v-if="key == 'C'"
                  ><!-- "C": "菜谱图片" -->
                  <el-col :span="18">
                    <el-input v-model="form[key]" :placeholder="'请输入' + value"></el-input>
                  </el-col>
                  <el-col :span="6">
                    <el-button type="primary" icon="el-icon-picture" @click="imageView = true">查看菜谱图片</el-button>
                    <el-image-viewer v-if="imageView" :on-close="imageViewerClose" :url-list="[form[key]]" />
                  </el-col>
                </template>
                <template v-else-if="key == 'D'"
                  ><!-- "D": "菜谱程序" -->
                  <el-col :span="18">
                    <el-input v-model="form[key]" :disabled="true" :placeholder="`点击编辑${value}编辑`"></el-input>
                  </el-col>
                  <el-col :span="6">
                    <el-button type="primary" icon="el-icon-edit" @click="$refs.childCookbook.drawerOpen()">编辑{{ value }}</el-button>
                  </el-col>
                </template>
                <template v-else-if="key == 'I'"
                  ><!-- "I": "适用地区" -->
                  <el-select v-model="form[key]" :placeholder="`请选择${value}`">
                    <el-option :label="area[key].value" :value="Number(area[key].key)" v-for="(item, key) in area" :key="key"></el-option>
                  </el-select>
                </template>
                <template v-else-if="key == 'J'"
                  ><!-- "J": "上线状态" -->
                  <el-select v-model="form[key]" :placeholder="`请选择${value}`">
                    <el-option v-for="(item, key) in status" :label="status[key].value" :value="Number(status[key].key)" :key="key"></el-option>
                  </el-select>
                </template>
                <template v-else-if="key == 'K'"
                  ><!-- "K": "适用语言" -->
                  <el-select v-model="form[key]" :placeholder="`请选择${value}`">
                    <el-option :label="lang[key].value" :value="lang[key].value" v-for="(item, key) in lang" :key="key"></el-option>
                  </el-select>
                </template>
                <template v-else>
                  <el-input v-model="form[key]" :placeholder="`请输入${value}`"></el-input>
                </template>
              </el-form-item>
              <el-form-item>
                <div class="from-opr">
                  <el-button @click="$router.go(-1)" icon="el-icon-back">返回</el-button>
                  <el-button type="primary" @click="onSubmit">{{ index ? '修改食谱' : '新增食谱' }}</el-button>
                </div>
              </el-form-item>
            </el-form>
          </div>
        </el-main>
      </el-container>
    </el-container>
    <cookbook-model @recipeCommandChange="recipeCommandChange" :data="form['D']" ref="childCookbook"></cookbook-model>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import CookbookModel from '@/components/CookbookModel'
import ExcelFrom from '@/model/ExcelFrom'
export default {
  components: { CookbookModel },
  computed: {
    ...mapGetters('recipes', {
      recipeData: 'getRecipeData',
      recipeLable: 'getRecipeLable',
    }),
  },
  data() {
    return {
      imageView: false, // 显示查看器
      index: '',
      form: null,
      tableData: null,
      area: null, //地区
      status: null, //状态
      lang: null, //语言
    }
  },
  created() {
    this.init()
  },
  methods: {
    async init() {
      const index = this.$route.query.index
      this.form = new ExcelFrom(this.recipeData[index])
      this.index = index
      await import('@/assets/json/describe.json').then((res) => {
        this.tableData = res.data
      })
      await import('@/assets/json/area.json').then((res) => {
        this.area = res.data
      })
      await import('@/assets/json/language.json').then((res) => {
        this.lang = res.data
      })
      await import('@/assets/json/status.json').then((res) => {
        this.status = res.data
      })
    },
    onSubmit() {
      const data = this.recipeData
      const form = this.form
      let submitType
      if (!this.index) {
        /* 新增食谱 */
        submitType = '新增'
        data.push(form.prop())
      } else {
        /* 编辑食谱 */
        submitType = '编辑'
        data[this.index] = form.prop()
      }
      this.$notify({
        title: '成功',
        message: `${submitType}菜谱数据成功！！！`,
        type: 'success',
        duration: 2000,
      })
      this.$store.commit('recipes/setRecipeData', data)
      this.$router.push('/')
    },
    imageViewerClose() {
      this.imageView = false
    },
    recipeCommandChange(data) {
      if (data != '') {
        this.$refs.childCookbook.drawerClose()
        this.form['D'] = data
      }
    },
  },
}
</script>
<style scoped>
.el-form {
  width: 60%;
}
.from-opr {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.el-form-item__content {
  display: flex;
  background: red;
}
.el-select {
  display: block;
}
</style>
